<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>表格插件 - 光年(Light Year Admin V4)后台管理系统模板</title>
    <link rel="icon" href="/favicon.ico" type="image/ico">
    <meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
    <meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板，基于Bootstrap v4.4.1。">
    <meta name="author" content="yinqi">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/static/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/static/js/jquery-confirm/jquery-confirm.min.css" rel="stylesheet">
    <link href="/static/css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15">

    <div class="row">

        <div class="col-lg-12">
            <div class="card">
                <header class="card-header">
                    <div class="card-title">7100P</div>
                </header>
                <div class="card-body">

                    <!--搜索-->
                    <div class="card-toolbar clearfix">
                        <form class="form-inline" action="#!" method="post">
                            <div class="form-group mb-2 mr-2">
                                <label class="input-group-text" for="search_year">Year</label>
                                <input class="form-control" type="text" id="search_year" name="search_year"
                                       placeholder="Please enter the year..">
                            </div>
                            <div class="form-group mb-2 mr-2">
                                <label class="input-group-text" for="search_make">Make</label>
                                <input class="form-control" type="text" id="search_make" name="search_make"
                                       placeholder="Please enter the Make..">
                            </div>
                            <div class="form-group mb-2 mr-2">
                                <label class="input-group-text" for="search_model">Model</label>
                                <input class="form-control" type="text" id="search_model" name="search_model"
                                       placeholder="Please enter the Model..">
                            </div>
                            <a class="btn btn-default mb-2 mr-2" href="#!" id="resource_table">
                                <i class="mdi mdi-magnify"></i>Search
                            </a>
                        </form>
                    </div>
                    <!-- 列表-->
                    <table id="tb_departments"></table>
                </div>
            </div>
        </div>

    </div>

</div>

<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/popper.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/jquery-confirm/jquery-confirm.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="/static/js/main.min.js"></script>
<script type="text/javascript" src="/static/js/layer/layer.js"></script>
<script type="text/javascript">
    $('#resource_table').click(function () {
        $("#tb_departments").bootstrapTable('refresh');
    });
    $('#search_year').on('keypress', function (event) {
        if (event.keyCode === 13) {
            $("#tb_departments").bootstrapTable('refresh');
        }
    });
    $('#search_make').on('keypress', function (event) {
        if (event.keyCode === 13) {
            $("#tb_departments").bootstrapTable('refresh');
        }
    });
    $('#search_model').on('keypress', function (event) {
        if (event.keyCode === 13) {
            $("#tb_departments").bootstrapTable('refresh');
        }
    });

    $('#tb_departments').bootstrapTable({
        classes: 'table table-bordered table-hover table-striped',
        url: "{:uri('innova/getList/type/7100p')}",
        method: 'get',
        dataType: 'json',        // 因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
        uniqueId: 'id',
        idField: 'id',             // 每行的唯一标识字段
        showColumns: true,         // 是否显示所有的列
        showRefresh: true,         // 是否显示刷新按钮
        pagination: true,                    // 是否显示分页
        sortOrder: "asc",                    // 排序方式
        responseHandler: function (res) {
            if (res.code === 0) {
                return {
                    'total': res.data.total,
                    'rows': res.data.rows,
                };
            } else {
                layer.msg('暂无数据！');
            }
        },
        queryParams: function (params) {
            var temp = {
                limit: params.limit,         // 每页数据量
                offset: params.offset,       // sql语句起始索引
                page: (params.offset / params.limit) + 1,
                sort: params.sort,           // 排序的列名
                sortOrder: params.order,      // 排序方式'asc' 'desc'
                year: $("#search_year").val(),
                make: $("#search_make").val(),
                model: $("#search_model").val(),
            };
            return temp;
        },                                   // 传递参数
        sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
        pageNumber: 1,                       // 初始化加载第一页，默认第一页
        pageSize: 10,                        // 每页的记录行数
        pageList: [10, 25, 50, 100],         // 可供选择的每页的行数

        columns: [{
            field: 'year',
            title: 'Year'
        }, {
            field: 'make',
            title: 'Make',
        }, {
            field: 'model',
            title: 'Model'
        }, {
            field: 'check_engine',
            title: 'Check Engine'
        }, {
            field: 'abs',
            title: 'Abs'
        }, {
            field: 'srs',
            title: 'Srs'
        }, {
            field: 'oil_reset_proceoure',
            title: 'Oil Reset Proceoure'
        }, {
            field: 'battery_proceoure',
            title: 'Battery Proceoure'
        }]
    });
</script>
</body>
</html>
